<!-- eslint-disable prettier/prettier -->
<script setup lang="ts">

import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
import CustomNavbar from './components/CustomNavbar.vue'
import CategoryPannel from './components/CategoryPanel.vue'
import PageSkeleton from './components/PageSkeleton.vue'
import HotPanel from './components/HotPanel.vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getHomeBannerAPI, getHomeCategoryApi, getHomeHotAPI } from '@/services/home'
import type { XtxGuessInstance,XtxSwiperInstance } from '@/types/component'

//广告数据
const bannerList = ref<BannerItem[]>([]);
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}

//分类
const categoryList=ref<CategoryItem[]>([]);
async function  getHOmeCategoryData(){
   const res=await getHomeCategoryApi();
   categoryList.value=res.result;
}


// 获取热门推荐数据
const hotList = ref<HotItem[]>([])
const getHomeHotData = async () => {
  const res = await getHomeHotAPI()
  hotList.value = res.result
}


//页面加载事件
const isLoaded=ref(false);
onLoad(async () => {
  isLoaded.value=false;
  await Promise.all([getHomeBannerData(),getHOmeCategoryData(),getHomeHotData()])
  isLoaded.value=true;
})

//上拉加载再多（猜 你喜欢）
const guessRef=ref<XtxGuessInstance>();
function onScrolltolower(){
  guessRef.value?.getMore();
}

//猜你喜欢
const isRriggered=ref(false);
async function onRefresherrefresh(){
  isRriggered.value=true;
  guessRef.value?.resetData();
  await Promise.all([getHomeBannerData(),getHOmeCategoryData(),getHomeHotData(), guessRef.value?.getMore()])

  isRriggered.value=false;
}
</script>

<template>
  <view class="viewport">
    <CustomNavbar></CustomNavbar>
    <scroll-view
      class="scroll-view"
      scroll-y
      @scrolltolower="onScrolltolower"
      refresher-enabled
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isRriggered"
    >
      <PageSkeleton v-if="!isLoaded"></PageSkeleton>
      <template v-else>
        <XtxSwiper :list="bannerList"></XtxSwiper>
        <CategoryPannel :list="categoryList"></CategoryPannel>
        <HotPanel :list="hotList"></HotPanel>
        <XtxGuess ref="guessRef" />
      </template>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}
</style>
